/* alljs 专用组件，用于弹出消息，分上弹出和下弹出 */
alljs-widget > * {
  display:none;
}
alljs-widget > message-top, .message-top, alljs-widget > message-bottom, .message-bottom {
  pointer-events: none;
  background: #222;
  padding: 3px 15px;
  border-radius: 2px;
  color: white;
  font-size: 14px;
  text-align: center;
  animation: fade-out 4s forwards;
  -webkit-animation: fade-out 4s forwards;
}
alljs-widget > message-top, .message-top {
  position: fixed;
  z-index: 100;
  left: 30%;
  width: 40%;
  top: 2%;
}
alljs-widget > message-bottom, .message-bottom {
  position: fixed;
  left: 30%;
  width: 40%;
  bottom: 2%;
}
@keyframes fade-out {
  0% {opacity: 1;}
  75% {opacity: 0.75;}
  100% {opacity: 0;}
}
@-webkit-keyframes fade-out {/*针对webkit内核*/
  0% {opacity: 1;}
  75% {opacity: 0.75;}
  100% {opacity: 0;}
}

@keyframes flash-icon {
  0% {transform:rotate(0deg);visibility: visible; }
  10% {transform:rotate(30deg);}
  20% {transform:rotate(-30deg);}
  30% {transform:rotate(30deg);}
  40% {transform:rotate(-30deg);}
  50% {transform:rotate(30deg);}
  60% {transform:rotate(-30deg);}
  70% {transform:rotate(30deg);}
  80% {transform:rotate(-30deg);}
  90% {transform:rotate(30deg);}
  100% {transform:rotate(0deg);visibility: hidden}
}
@-webkit-keyframes flash-icon {/*针对webkit内核*/
  0% {transform:rotate(0deg);visibility: visible; }
  10% {transform:rotate(30deg);}
  20% {transform:rotate(-30deg);}
  30% {transform:rotate(30deg);}
  40% {transform:rotate(-30deg);}
  50% {transform:rotate(30deg);}
  60% {transform:rotate(-30deg);}
  70% {transform:rotate(30deg);}
  80% {transform:rotate(-30deg);}
  90% {transform:rotate(30deg);}
  100% {transform:rotate(0deg);visibility: hidden}
}
/* 摇摆图标以提示 */
.flash-tipico {
  animation: flash-icon 2s forwards;
  -webkit-animation: flash-icon 2s forwards;
}

/* 类似文章列表中的：顶/荐/火/新 */
.badge {display:inline-block;vertical-align:text-bottom;margin:0 4px;padding:0 2px;background-color:red;color:white;font-size:0.75em;border:1px solid black;border-radius:3px}

/* 超链接文本样式 */
a {text-decoration:none;color:unset}
a:hover {text-decoration:underline}

/* 文本快速样式 */
r {color:red}
g {color:grey}
b {font-weight:bold}
l {font-size:1.33em}
rl {color:red;font-size:1.33em}
gl {color:grey;font-size:1.33em}
bl {font-weight:bold;font-size:1.33em}
rb {color:red;font-weight:bold}
gb {color:grey;font-weight:bold}
rbl {color:red;font-weight:bold;font-size:1.33em}
gbl {color:grey;font-weight:bold;font-size:1.33em}

/* 按钮样式 */
input[type="submit"], input[type="button"], button {
  border-radius: 3px;
  border: 1px solid #bbb;
  padding: 3px 9px;
  background-image: linear-gradient(to bottom,#fff,#ddd);
  vertical-align: middle
}
input[type="submit"], input[type="button"], button, .fa {cursor:pointer}

/* 文章中的图片，点击浮动放大，再点返回 */
.article-img-div {background-color:#00000077;position:fixed;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;overflow:auto}
.article-img-div * {pointer-events:none}
.article-img-div div {flex-grow:1}
.article-content img, .article-img-div {cursor:pointer}

/* 使用 ckeditor/contents.css 进行排版，部分不需要使用的则通过 common-style 回复原样式 */
.common-style a { text-decoration:none }
.common-style a:hover { text-decoration: underline }
.common-style ul { list-style: none }
.common-style table { max-width:650px; width: 100% }
.common-style input[type="text"], .common-style input[type="date"],
.common-style input[type="datetime-local"], .common-style input[type="password"], .common-style input[type="search"], .common-style input[type="number"],
.common-style textarea, .common-style .like-input { margin: 5px; padding:3px; border:1px solid #ccc; border-radius:3px }
.common-style input[type="search"] {height: 2.1em;vertical-align: bottom;}
.common-style select { margin: 5px; padding:3px; border:1px solid #ccc; border-radius:3px }

/* 方便在表单页面中动态设置大小 */
.auto-input-width input[type="text"], .auto-input-width input[type="date"],
.auto-input-width input[type="datetime-local"], .auto-input-width input[type="password"], .auto-input-width input[type="number"],
.auto-input-width input[type="search"], .auto-input-width textarea, .auto-input-width .like-input {width:50%}
.auto-input-width select {width:51.5%}

/* 子节点全部垂直居中 */
.childs-vert-middle > * {vertical-align: middle}

/* 使 button 看起来像 a */
.button-likeA { background:none;border:none;text-decoration: underline; color:#0000ee }
.button-likeA-white { background:none;border:none;text-decoration: underline; color:white }
.button-likeA-black { background:none;border:none;text-decoration: underline; color:black }
.button-likeText { background:none;border:none;color:inherit;font-size:inherit }

/* 修正fa中过宽的样式 */
.fa-stack {width:1em}

.body-margin {margin:24px 3%}
.body-nomargin {margin:0}

/* 整体内容居中，限宽1200px */
.width-limit {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
}
/* 整体内容居中，限宽800px */
.width-limit-800 {
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
}

/* 导航列表样式 */
.nav-head {
  font-size:14px;
  font-weight:normal;
  margin-left:1em;
  word-break:keep-all;
}

/* 常用缩进:12px */
.padding-leftright {
  padding: 0 12px;
}
.padding-topbottom {
  padding: 12px 0;
}
.padding-arround {
  padding: 12px;
}
.padding-rightbottom {
  padding: 0 12px 12px 0;
}
.childs-padding-leftright > * {
  padding: 0 12px;
}
.childs-padding-topbottom > * {
  padding: 12px 0;
}
.childs-padding-arround > * {
  padding: 12px;
}
/* 常用缩进:6px */
.padding-leftright-6 {
  padding: 0 6px;
}
.padding-topbottom-6 {
  padding: 6px 0;
}
.padding-arround-6 {
  padding: 6px;
}
.padding-rightbottom-6 {
  padding: 0 6px 6px 0;
}
.childs-padding-leftright-6 > * {
  padding: 0 6px;
}
.childs-padding-topbottom-6 > * {
  padding: 6px 0;
}
.childs-padding-arround-6 > * {
  padding: 6px;
}

/* 需要absolute定位的元素的母元素 */
.position-anchor {display:inline-block;position:relative}

/* 自适应双栏框架，网页端为左右分栏，移动端为上下分栏 */
.adapt-panel {display:flex;flex-flow: row wrap;}
.adapt-bar {display:flex;flex-flow: column wrap;}
/* 根据 flex-direction 自动为 hbox 或 vbox */
.hbox {display:flex;flex-flow: row nowrap;}
.vbox {display:flex;flex-flow: column nowrap;}
.adapt-panel > *, .adapt-bar > *, .hbox > *, .vbox > * {box-sizing: border-box;}
.align-items-center {align-items:center}
.align-items-baseline {align-items:baseline}
.justify-content-center {justify-content:center}
.childs-flex-grow > * {flex-grow:1}
.childs-flex-shrink > * {flex-shrink:1}

.adapt-two-left {
  width:305px;
  flex-grow:1.5;
}
.adapt-two-right {
  width:130px;
  flex-grow:1;
}

.adapt-three-midright {
  width:77%;
}
.adapt-three-mid {
  width:235px;
  flex-grow:1.5;
}
.adapt-three-right {
  width:100px;
  flex-grow:1;
 }

/* 修正ckedit的样式 */
.cke_bottom, a.cke_button {position:static!important}